<!--
 * @Author: your name
 * @Date: 2021-12-30 09:59:50
 * @LastEditTime: 2023-08-04 18:38:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\yield-report\index.vue
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <Search
        :day="true"
        :status="!status"
        :search-list="reset"
        @search-list="searchList"
      >
        <template v-slot:left>
          <div v-if="status" class="label-input mr-20">
            <div class="label">选择承租户:</div>
            <div class="input">
              <el-select v-model="reset.lesseeNo" filterable clearable>
                <el-option value="" label="所有承租户" />
                <el-option
                  v-for="item in lesseeList"
                  :key="item.lesseeNo"
                  :label="item.lesseeName"
                  :value="item.lesseeNo"
                />
              </el-select>
            </div>
          </div>
          <div class="label-input mr-20">
            <div class="label">批次名称:</div>
            <div class="input">
              <el-select v-model="reset.batchNo" style="width:260px" filterable clearable>
                <el-option value="" label="所有批次" />
                <el-option
                  v-for="item in batchList"
                  :key="item.batchNo"
                  :label="item.batchName"
                  :value="item.batchNo"
                />
              </el-select>
            </div>
          </div>
        </template>
        <!-- <template v-if="!status" v-slot:lefts>
          <div class="label-input mr-20">
            <div class="label">批次名称:</div>
            <div class="input">
              <el-select v-model="reset.batchNo" style="width:260px" clearable>
                <el-option value="" label="所有批次" />
                <el-option
                  v-for="item in batchList"
                  :key="item.batchNo"
                  :label="item.batchName"
                  :value="item.batchNo"
                />
              </el-select>
            </div>
          </div>
        </template> -->
        <template v-slot:right>
          <div class="search ml-20">
            <img src="~@/assets/action-bar-icon/search.png" @click="search" />
          </div>
          <div class="search ml-20">
            <img src="~@/assets/statistical-report/reset.png" @click="resets" />
          </div>
          <div class="search ml-20">
            <img
              src="~@/assets/statistical-report/export.png"
              @click="open"
            />
          </div>
        </template>
      </Search>
      <Time />
    </template>
    <template v-slot:content>
      <!-- 基地权限 -->
      <div v-if="status" class="main-boxone">
        <!-- 农资投入金额 -->
        <Main class="lesseeOutput">
          <template v-slot:top-name>
            农资投入金额
          </template>
          <template v-slot:main-content>
            <zhechart
              :cdata="farmtaskcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 农资投入明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            农资投入明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="partTableData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  label="农资名称"
                  prop="materialDTO.materialName"
                  min-width="140"
                />
                <el-table-column
                  label="投入量"
                  prop="assetQuantity"
                />
                <el-table-column
                  label="投入金额"
                  prop="assetValue"
                >
                </el-table-column>
                <el-table-column
                  label="经手人"
                  prop="personName"
                >
                </el-table-column>
                <el-table-column
                  v-if="false"
                  label="农资图片"
                >
                  <template>
                    <el-button type="text">查看图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入时间"
                  prop="assetDate"
                >
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <div v-if="conList.length !== 0" class="agricultural-statistics">
              <el-carousel arrow="never" :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.agriculturalMaterialName }}
                      </div>
                      <div class="shadows-main">
                        <h4>总投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantity }}</span>{{ item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>亩均投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantityMu }}</span>{{ item1.unitName }}/亩
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div v-if="abatchList.length !== 0" class="batch-statistics">
              <el-carousel arrow="never" :autoplay="false">
                <el-carousel-item
                  v-for="(item, index) in abatchList"
                  :key="index"
                >
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.lessee }}
                      </div>
                      <div class="shadows-main">
                        <h4>批次名称</h4>
                        <p>
                          <span>{{ item1.batchName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>农资投入次数</h4>
                        <p>
                          <span>{{ item1.productionTimes }}</span>次
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>投入金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>执行时间</h4>
                        <p>
                          <span>{{ item1.assetDate }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
      </div>
      <!-- 承租户权限 -->
      <div v-if="!status" class="information">
        <div class="information-item">
          <i></i>
          <p>批次名称</p>
          <p>{{ batchData.batchName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养设施</p>
          <p class="facility">
            <span
              v-for="item in batchData.batchFacilityMapperList"
              :key="item.facilityId"
            >{{ item.facilityName }}</span>
          </p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养品种</p>
          <p>{{ batchData.plantingTypeName }}-{{ batchData.varietyName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养开始时间</p>
          <p>{{ batchData.assetDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养结束时间</p>
          <p>{{ batchData.completionDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>生长周期</p>
          <p v-if="batchData.nowDay">{{ batchData.nowDay }}天</p>
        </div>
      </div>
      <div v-if="!status" class="main-boxone">
        <Main class="details">
          <template v-slot:top-name>
            农资投入明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="partTableData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="农资名称"
                  prop="agriculturalMaterialName"
                  min-width="140"
                />
                <el-table-column label="投入量" prop="assetQuantityUnitName" />
                <el-table-column label="投入金额" prop="assetValueUnitName">
                  <template
                    v-if="scope.row.agriculturalMaterialName"
                    slot-scope="scope"
                  >
                    <span v-if="scope.row.assetValueUnitName">{{
                      scope.row.assetValueUnitName
                    }}</span>
                    <span v-else>——</span>
                  </template>
                </el-table-column>
                <el-table-column label="经手人" prop="handlerName">
                  <template
                    v-if="scope.row.agriculturalMaterialName"
                    slot-scope="scope"
                  >
                    <span v-if="scope.row.handlerName">{{
                      scope.row.handlerName
                    }}</span>
                    <span v-else>——</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="false" label="农资图片">
                  <template>
                    <el-button type="text">查看图片</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="投入时间"
                  prop="assetDate"
                  :formatter="dateFormat"
                >
                  <template
                    v-if="scope.row.agriculturalMaterialName"
                    slot-scope="scope"
                  >
                    <span v-if="scope.row.assetDate">{{
                      dateToFormat(scope.row.assetDate)
                    }}</span>
                    <span v-else>——</span>
                  </template>
                </el-table-column>
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <div class="agricultural-statistics">
              <el-carousel arrow="never" :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.agriculturalMaterialName }}
                      </div>
                      <div class="shadows-main">
                        <h4>总投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantity }}</span>{{ item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>亩均投入量</h4>
                        <p>
                          <span>{{ item1.assetQuantityMu }}</span>{{ item1.unitName }}/亩
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总金额</h4>
                        <p>
                          <span>{{ item1.assetValue }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
import Pagin from "../components/Pagination";
import Search from "../components/search/index.vue";
import Main from "../components/main/index.vue";
import agriculturalReport from "@/api/digital-production/statistical-report/agricultural-report";
import { mymixin } from "@/utils/mixin";
import zhechart from "../components/Echarts/components/linechart/chart.vue";
export default {
  components: { BaseMainSlot, Search, Main, zhechart, Pagin },
  mixins: [mymixin],
  data() {
    return {
      reset: {
        startDate: "",
        endDate: "",
        startTime: this.etPassYearFormatDate(),
        endTime: "",
        lesseeNo: "",
        batchNo: "",
        status: 0
      },
      status: true,
      lesseeList: [],
      batchData: {
        batchName: '',
        batchFacilityMapperList: [],
        plantingTypeName: '',
        varietyName: '',
        assetDate: '',
        completionDate: '',
        nowDay: ''
      },
      batchList: [],
      conList: [],
      abatchList: [],
      reportForm: {},
      // 农事任务信息
      farmtaskcdata: {},
      partTableData: [],
      // 当前页
      currentPage: 1,
      // 每页的数据条数
      pageSize: 6,
      // 总条数
      totalSize: 0
    };
  },
  created() {
    this.searchData();
    this.batchListData()
    // console.log()
    this.$nextTick(() => {
      let parentId = sessionStorage.parentId;
      if (parentId !== undefined) {
        // 基地权限
        this.status = false;
      } else if (parentId === undefined) {
        // 承租户权限
        this.status = true;
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    })
  },
  methods: {
    // 搜索组件
    searchList(e) {
      // console.log(e);
      this.reset = e;
      this.batchListData(e)
    },
    // 重置
    resets() {
      let etPassYearFormatDate = this.etPassYearFormatDate()
      // let time = new Date()
      // let endTime = (time).getTime()
      const y = new Date(etPassYearFormatDate).getFullYear()
      const f = y + ' 12-31 23:59:59:999'
      const endTime = new Date(f).getTime()
      // 重置搜索框
      this.reset = {
        startDate: "",
        endDate: "",
        startTime: etPassYearFormatDate,
        endTime: endTime,
        lesseeNo: "",
        batchNo: "",
        status: 1
      };
      // 重置 批次单条批次展示信息
      this.batchData = {
        batchName: '',
        batchFacilityMapperList: [],
        plantingTypeName: '',
        varietyName: '',
        assetDate: '',
        completionDate: '',
        nowDay: ''
      }
      this.$nextTick(() => {
        this.search()
      })
    },
    // 默认开始时间
    etPassYearFormatDate () {
      const y = new Date().getFullYear()
      // 第一天
      const f = y + ' 01-01 00:00:00'
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000
      // console.log(date)
      return date
    },
    // 总体调用接口
    datalist() {
      let batchNoList = []
      if (this.reset.batchNo) {
        batchNoList = [this.reset.batchNo]
      } else if (!this.reset.batchNo && this.reset.lesseeNo) {
        batchNoList = this.batchList.map(el => { return el.batchNo })
      }
      this.batchNoList = batchNoList
      let params = {
        batchNoList,
        startTime: this.reset.startTime || this.reset.startDate,
        endTime: this.reset.endTime || this.reset.endDate,
        lesseeNo: this.reset.lesseeNo,
        batchType: sessionStorage.farmingTypeNo === 'dt' ? "BATCH" : "SINGLE"
      };
      this.params = params
      this.tableDataList(params);
      this.getColumnChart(params);
      this.reportAllBatch(params);
      this.batchForm(this.reset.batchNo);
    },
    // 农资明细
    tableDataList(e) {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: e
      };
      agriculturalReport.agriculturalMaterialInputList(params).then(res => {
        this.loading = false;
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        this.partTableData = data.content;
        let havline = this.partTableData.length % this.pageSize;
        if (this.partTableData.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.partTableData.push({
                indflag: i + this.partTableData.length - 1
              });
            }
          }
        }
      });
    },
    // 查询单个批次
    async batchForm(val) {
      if (!val) return;
      const { data: Batch } = await agriculturalReport.getBatchList(val);
      this.batchData = Batch;
    },
    // 承租户下拉框数据
    async searchData() {
      const { data: lessee } = await agriculturalReport.organizationList();
      this.lesseeList = lessee;
    },
    // 批次下拉框数据
    async batchListData(val) {
      if (val) {
        let endTime = this.dateToFormat(val.endTime)
        let startTime = ''
        if (val.startTime !== '') {
          startTime = this.dateToFormat(val.startTime)
        }
        var e = {
          startTime: startTime,
          endTime: endTime
        }
      }
      // 获取批次选择框数据
      const { data: Batch } = await agriculturalReport.queryBatchList({
        lesseeNo: this.reset.lesseeNo
      });
      this.batchList = Batch;
    },
    // echarts
    getColumnChart(e) {
      agriculturalReport.agriculturalMaterialChartList(e).then(res => {
        let data = res.data;
        let xAxisone = [];
        if (data[0]) {
          xAxisone = data[0];
        }
        let addser = [];
        if (data[1]) {
          let listone = data[2];
          for (let zz in listone) {
            let addobj = {
              name: zz,
              type: "bar",
              data: listone[zz],
              barMaxWidth: 50,
              itemStyle: {
                normal: {
                  barBorderRadius: [6, 6, 0, 0]
                }
              }
            };
            addser.push(addobj);
          }
        }
        // xAxisone = xAxisone.unshift('')
        this.farmtaskcdata = {
          xAxisdata: xAxisone,
          xData: data[1],
          seriesData: addser,
          unitName: '元'
        };
      });
    },
    open() {
      this.$confirm(`是否导出${this.$route.meta.title}.xlsx`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exPort()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 导出
    async exPort() {
      // 点击导出搜索的数据
      this.downLoading = true;
      let batchName = ''
      let organizationName = ''
      let ExcelForm = {}
      let endTime = this.reset.endDate || this.reset.endTime
      let startTime = this.reset.startDate || this.reset.startTime
      const Year = new Date(startTime).getFullYear()
      if (this.reset.batchNo) {
        this.batchList.forEach(item => {
          if (item.batchNo === this.reset.batchNo) {
            batchName = item.batchName
          }
        })
      }
      if (this.reset.lesseeNo) {
        this.lesseeList.forEach(item => {
          if (item.lesseeNo === this.reset.lesseeNo) {
            organizationName = item.organizationName
          }
        })
      }
      ExcelForm = {
        batchNoList: this.batchNoList,
        lesseeNo: this.reset.lesseeNo,
        endTime: endTime,
        startTime: startTime,
        reportTitle: `${Year}年${batchName}${organizationName}`
      }
      const data = await agriculturalReport.exportExcel(ExcelForm);
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      // console.log()
      link.download = this.$route.meta.title + ".xlsx";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 转化数据 跑马灯
    async reportAllBatch(e) {
      // 按农资统计
      const {
        data: reportAllBatch
      } = await agriculturalReport.queryReportFormList(e);
      // 按批次统计
      const {
        data: abatchReport
      } = await agriculturalReport.abatchReportInputList(e);
      this.conList = this.traverList(reportAllBatch, 5);
      this.abatchList = this.traverList(abatchReport, 4);
      this.reportForm = reportAllBatch[0] || {};
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      const list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      return list;
    },
    dateFormat(row, colnum) {
      if (row.assetDate) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format("YYYY年-MM月-DD日 MM:SS:mm");
      }
    },
    search() {
      this.currentPage = 1;
      this.datalist();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.tableDataList(this.params);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.tableDataList(this.params);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/report.scss";
::v-deep .common-layout {
  overflow: auto !important;
  // .zhcontent {
  //   height: calc(100% - 50px) !important;
  // }
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 基地权限
.lesseeOutput {
  // height: 265px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}
// 基地权限
.outputdetails {
  // height: 1000px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    margin: 0 auto;
    .top {
      padding: 5px;
      width: 100%;
      height: 320px;
      position: relative;
    }

    // 农资
    .agricultural-statistics {
      height: 280px;
      width: 100%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/agricultural-report/agricultural-statistics.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 78%;
          width: 19%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            position: absolute;
            top: -7%;
            text-align: center;
            font-size: 12px;
            width: 166px;
            height: 26px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height: 24px;
            background: rgba(1, 59, 77, 1);
            border: 1px solid #4affda;
            box-shadow: 0px 0 7px .5px rgb(255, 255, 255) inset;
            opacity: 1;
            border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          div:nth-child(3) {
            margin: 8px 0;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 8px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
    // 批次
    .batch-statistics {
      height: 360px;
      width: 100%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/agricultural-report/batch-statistics.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 80%;
          width: 24%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            // top: -7%;
            text-align: center;
            font-size: 12px;
            width: 100%;
            padding: 12px 0 0 0;
            // height: 26px;
            // padding: 0 10px;
            // box-sizing: border-box;
            // line-height: 24px;
            // background: rgba(1, 59, 77, 1);
            // border: 1px solid #4AFFDA;
            // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            // opacity: 1;
            // border-radius: 16px;
            // overflow:hidden;
            // white-space:nowrap;
            // text-overflow:ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          .shadows-main {
            margin: 5px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
// 承租户权限
.details {
  width: 100%;
  // height: calc(100% -30px);
  margin-bottom: 0 !important;
  ::v-deep .main-content {
    padding: 50px 12px 30px;
    position: relative !important;
    .top {
      padding: 5px;
      width: 100%;
      height: 310px;
      position: relative;
    }
    // 农资
    .agricultural-statistics {
      height: 260px;
      width: 100%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/agricultural-report/agricultural-statistics.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 78%;
          width: 19%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            position: absolute;
            top: -7%;
            text-align: center;
            font-size: 12px;
            width: 166px;
            height: 26px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height: 24px;
            background: rgba(1, 59, 77, 1);
            border: 1px solid #4affda;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            opacity: 1;
            border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          div:nth-child(3) {
            margin: 8px 0;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 8px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
::v-deep #chart {
  > div {
    bottom: 0;
  }
}
.facility {
  width: 210px;
  height: 20px;
  padding: 0 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  span {
    white-space: nowrap;
    // margin-left: 10px;
  }
}
.facility::-webkit-scrollbar {
  height: 4px;
}
</style>
